<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="管理员列表" name="first">
        <div class="d-flex align-items-center">
          <el-button type="primary" size="mini">添加管理员</el-button>
          <div class="d-flex ml-auto">
            <el-input
              v-model="keyword"
              size="mini"
              placeholder="请输入用户名"
              style="width: 75%"
            ></el-input>
            <el-button type="primary" size="mini" class="ml-2">搜索</el-button>
          </div>
        </div>
        <el-table
          :data="managerList"
          style="width: 100%; margin-top: 20px; margin-bottom: 60px"
          border
          ref="multipleTable"
        >
          <el-table-column label="用户头像" align="center" width="80">
            <template v-slot="scope">
              <el-avatar size="large" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号码"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="email"
            label="邮箱地址"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column label="所属用户组" align="center" width="150">
            <template v-slot="scope">
              {{ scope.row.group.name }}
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="150">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="添加时间"
            align="center"
            width="150"
            prop="create_time"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template>
              <el-button type="text" size="medium">修改</el-button>
              <el-button type="text" size="medium">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="角色列表" name="second">
        <div class="d-flex align-items-center">
          <el-button type="primary" size="mini">添加角色</el-button>
        </div>
        <el-table
          :data="groupList"
          style="width: 100%; margin-top: 20px; margin-bottom: 200px"
          border
          ref="multipleTable"
        >
          <el-table-column prop="name" label="角色名称" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template v-slot="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template>
              <el-button type="text" size="medium">修改</el-button>
              <el-button type="text" size="medium">配置权限</el-button>
              <el-button type="text" size="medium">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="权限列表" name="third">
        <el-tree
          :data="data"
          default-expand-all
          :expand-on-click-node="false"
          draggable
          @node-drop="nodeDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div>
              <el-input v-if="data.editStatus" v-model="data.label"></el-input>
              <span v-else>{{ node.label }}</span>
            </div>
            <span>
              <el-button
                :type="data.status ? 'primary' : 'danger'"
                size="mini"
                plain
                @click.stop="showOrHide(data)"
              >
                {{ data.status ? "显示" : "隐藏" }}
              </el-button>
              <el-button type="success" size="mini" @click="append(data)"
                >增加</el-button
              >
              <el-button
                :type="data.editStatus ? 'default' : 'warning'"
                size="mini"
                @click="data.editStatus = !data.editStatus"
                >{{ data.editStatus ? "完成" : "修改" }}</el-button
              >
              <el-button type="danger" size="mini" @click="remove(node, data)"
                >删除</el-button
              >
            </span>
          </span>
        </el-tree>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        status: 1,
        editStatus: false,
        children: [
          {
            id: 2,
            label: "二级 1-1",
            status: 1,
            editStatus: false,
            children: [
              {
                id: 3,
                label: "三级 1-1-1",
                status: 1,
                editStatus: false,
              },
              {
                id: 4,
                label: "三级 1-1-2",
                status: 1,
                editStatus: false,
              },
            ],
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
      keyword: "",
      activeName: "first",
      form: {
        customer: "",
        key: "",
      },
      managerList: [
        {
          id: 10,
          username: "用户名",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
          phone: "15099999999",
          email: "8288888@qq.com",
          group: {
            id: 1,
            name: "管理员",
          },
          status: 1,
        },
      ],
      groupList: [
        {
          id: 10,
          name: "超级管理员",
          status: 1,
        },
      ],
    };
  },
  filters: {
    formatType(e) {
      let arr = ["按件数", "按重量"];
      return arr[e];
    },
  },
  components: {},
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {
    showOrHide(data) {
      data.status = data.status ? 0 : 1;
    },
    remove(node, data) {
      this.$confirm("确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //   定位到点击所在的同一级的所有节点
          let parent = node.parent;
          let children = parent.data.children || parent.data;
          let index = children.findIndex((v) => v.id === data.id);
          children.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    append(data) {
      if (data.children) {
        let obj = {
          id: 1,
          label: "一级 1",
          status: 1,
          editStatus: false,
          children: [],
        };
        data.children.push(obj);
      }
    },
    // 拖曳的结果
    nodeDrop(...options) {
      console.log(options);
    },
  },
};
</script>
<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/deep/.el-tree-node__content {
  padding: 20px;
}
</style>
